import React, {useState} from 'react'
import { Form, Input, Button, Checkbox, message } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons';
import { getSms, login } from '@/api/login'
import './index.less'
import {user} from '@/api/type/auth' // 用户信息验证
import Encrypt from '@/utils/encrypt'
import { history } from '@@/core/history';

export default function Login(props:any) {
  let [loading, setLoading] = useState<boolean>(false)
  let [user,setUser] = useState<user>({
    username: '',
    password: '',
    module: 'register',
    cord: ''
  })

  // 获取验证码
  const getCord = (loadingParams:boolean) => {
    setLoading(loadingParams) // 对数据进行更改
    getSms(user).then( (res: any) => {
      if (res.resCode === 0) {
        message.success(res.message);
      } else {
        message.error(res.message);
      }
      setLoading(false)
    })
  }
  // 登录
  const onFinish = (values: any) => {
    login(values).then((res:any) => {
      if (res.resCode === 0) {
        message.success(res.message);
        // 对加密的数据进行存储 new Date().getTime()/1000/60/60 转换成小时
        const cuerTime = new Date().getTime()/1000/60/60
        const encrypt = new Encrypt()
        encrypt.setItem('username', values.username)
        encrypt.setItem('password',values.password)
        encrypt.setItem('timer', cuerTime.toString())
        history.push('/dashboard')
      } else {
        message.error(res.message);
      }
    })
  };

  // 获取用户名的值
  const onBlurUser = (e: any) => {
    setUser({
      ...user,
      username: e.target.value
    })
  }

  // 进行注册
  const goRegister = () => {
    props.history.push('/register')
  }


    return (
      <div className='login-layout'>
      <div  className='login'>
        <h1>React Admin Login</h1>
        <Form
          name="normal_login"
          className="login-form"
          initialValues={{ remember: true }}
          onFinish={onFinish}
        >
          <Form.Item
            name="username"
            rules={[{ required: true, message: '请输入手机号/邮箱!' }]}
          >
            <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入手机号/邮箱" onBlur={(e) => onBlurUser(e)}/>
          </Form.Item>
          <Form.Item
            name="password"
            rules={[{ required: true, message: '请输入密码!' }]}
          >
            <Input
              prefix={<LockOutlined className="site-form-item-icon" />}
              type="password"
              placeholder="请输入密码"
              onBlur={(e) => onBlurUser(e)}
            />
          </Form.Item>
          <div className='form-cord'>
            <Form.Item
              name="code"
              rules={[{ required: true, message: '请输入验证码' }]}
            >
              <Input  placeholder="请输入验证码"/>
            </Form.Item>
            <Button type="primary" loading={loading} onClick={()=>getCord(true)}>
              获取验证码
            </Button>
          </div>
          <Form.Item>
            <Form.Item name="remember" valuePropName="checked" noStyle>
              <Checkbox>记住我</Checkbox>
            </Form.Item>

            <a className="login-form-forgot" href="">
              忘记密码?
            </a>
          </Form.Item>

          <Form.Item>
            <Button type="primary" htmlType="submit" className="login-form-button">
              登录
            </Button>
            <Button type="link" onClick={goRegister}>去注册!</Button>
          </Form.Item>
        </Form>
      </div>
      </div>
    );
}
